// 变形曲线 DeformationCurve.vue
<template>
  <div class="tab-pane fit relative-position">
    <div class="item">
      <div class="title-text">{{ $t('单次变形量') }}</div>
      <line-chart :chartData="lineChart1" :customOptions="cusOptions1" :height="chartHeight"></line-chart>
    </div>
    <div class="item">
      <div class="title-text">{{ $t('变形速率') }}</div>
      <line-chart :chartData="lineChart2" :customOptions="cusOptions2" :height="chartHeight"></line-chart>
    </div>
    <div class="item">
      <div class="title-text">{{ $t('累计变形量') }}</div>
      <line-chart :chartData="lineChart3" :customOptions="cusOptions1" :height="chartHeight"></line-chart>
    </div>
    <!--
      将QInnerLoading放置为最后一个子元素。
      这对于将其显示在其他内容之上很重要。
    -->
    <q-inner-loading :visible="tabPaneLoading">
      <template v-if="tabPaneLoadingContent">
        {{ tabPaneLoadingContent }}
      </template>
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
    </q-inner-loading>
  </div>
</template>

<script>
  export default {
    name: 'deformation-curve',
    props: {
      dealData: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    data () {
      return {
        tabPaneLoading: true,
        tabPaneLoadingContent: '',
        chartHeight: '260px',
        cusOptions1: {
          xAxis: {
            axisLabel: {
              formatter: function(val){
                return val.replace(' ', '\n');
              }
            }
          },
          yAxis: {
            axisLabel: {
              formatter: '{value} mm'
            }
          }
        },
        cusOptions2: {
          xAxis: {
            axisLabel: {
              formatter: function(val){
                return val.replace(' ', '\n');
              }
            }
          },
          yAxis: {
            axisLabel: {
              formatter: '{value} mm/d'
            }
          }
        },
        lineChart1: {},
        lineChart2: {},
        lineChart3: {}
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.getDeformedCurve().finally(() => {
          this.tabPaneLoading = false;
        });
      })
    },
    methods: {
      transNum(num) {
        return (Number(num) * 1000).toFixed(2);
      },
      getDeformedCurve() {
        return this.$axios.getDeformedCurve({
          data: {
            csecid: this.dealData.detailInfo['csecid'],
            point_alias: this.dealData.data['point_alias']
          }
        }).then(result => {
          this.buildChart(result.data || []);
        });
      },
      buildChart(data) {
        let cumu_s = [], deltavalue_s = [], speed_s = [], surveytime_s = [];
        for(let i = 0, tmp; i < data.length; i++) {
          tmp = data[i];
          cumu_s.push(this.transNum(tmp.cumu));
          deltavalue_s.push(this.transNum(tmp.deltavalue));
          speed_s.push(this.transNum(tmp.speed));
          surveytime_s.push(tmp.surveytime);
        }
        // 单次变形量
        this.lineChart1 = {
          typeData: surveytime_s,
          valueData: [
            {
              data: deltavalue_s
            }
          ]
        };
        // 变形速率
        this.lineChart2 = {
          typeData: surveytime_s,
          valueData: [
            {
              data: speed_s
            }
          ]
        };
        // 累计变形量
        this.lineChart3 = {
          typeData: surveytime_s,
          valueData: [
            {
              data: cumu_s
            }
          ]
        };
      }
    }
  }
</script>

<style lang="less" scoped>
.tab-pane{
  .q-inner-loading{
    background-color: rgba(255, 255, 255, 1);
  }

  > .item{
    background-color: #ffffff;
    padding: 5px 2px;
    margin: 10px 0;

    .title-text{
      padding: 1px 3px;
    }
  }
}
</style>

